import emptyImg from '@/assets/img/empty.png';
import { Empty, Flex } from 'antd';
import type * as CSS from 'csstype';
import { useIntl } from 'umi';

export const CustomizeRenderEmpty = () => {
  const intl = useIntl();
  return (
    <div style={{ textAlign: 'center', maxWidth: '100%' }}>
      <img src={emptyImg} style={{ maxWidth: '100%' }} />
      <p style={{ color: '#222' }}>
        {intl.formatMessage({
          id: 'global.noDataYet',
        })}
      </p>
    </div>
  );
};

const Index: React.FC<{
  style?: CSS.Properties<string | number>;
}> = ({ style = {} }) => {
  const intl = useIntl();
  return (
    <Flex style={{ width: '100%', ...style }} justify="center" align="center">
      <Empty
        image={emptyImg}
        imageStyle={{ height: 120 }}
        description={
          <span style={{ color: '#222' }}>
            {intl.formatMessage({
              id: 'global.noDataYet',
            })}
          </span>
        }
      ></Empty>
    </Flex>
  );
};

export default Index;
